<template>
    <div>
        <el-dialog
            :title="!form.id ? '新增' : '修改'"
            :visible.sync="visible"
            :close-on-click-modal="false">

            <div class="table_form_wrap">
                <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="120px">
                    <el-form-item label="代理商" prop="agentId">
                        <el-select :loading="loading" placeholder="请选择" v-model="form.agentId" filterable clearable style="width: 80%">
                            <el-option
                                v-for="item in agentList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="会员名称" prop="nickname">
                        <el-input placeholder="" v-model="form.nickname" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-select v-model="form.sex" placeholder="请选择" clearable style="width: 80%">
                            <el-option label="男" :value="1"></el-option>
                            <el-option label="女" :value="2"></el-option>
                            <el-option label="保密" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="mobile">
                        <el-input placeholder="" v-model="form.mobile" clearable style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label="会员等级" prop="levelId">
                        <el-select :loading="loading" placeholder="请选择" v-model="form.levelId" filterable clearable style="width: 80%">
                            <el-option
                                v-for="item in levelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="推荐会员" prop="refereeMemberId">
                        <el-select
                            placeholder="请输入关键词"
                            v-model="form.refereeMemberId"
                            clearable
                            filterable
                            remote
                            reserve-keyword
                            :remote-method="remoteMethod"
                            :loading="loading"
                            style="width: 80%">
                            <el-option
                                v-for="item in refereeMemberList"
                                :key="item.id"
                                :label="item.nickname"
                                :value="item.id"
                            >
                            <span style="float: left">{{ item.nickname }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mobile }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="会员标记" prop="memberFlag">
                        <el-select v-model="form.memberFlag" placeholder="请选择" clearable style="width: 80%">
                            <el-option label="内部员工" :value="1"></el-option>
                            <el-option label="外部分销" :value="2"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="会员有效期" prop="expire">
                        <el-date-picker
                                v-model="form.expire"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="所在城市" prop="city">
                        <el-input placeholder="" v-model="form.city" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio-button :label="1">正常</el-radio-button>
                            <el-radio-button :label="0">锁定</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                </el-form>
            </div>


            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button @click="handleSubmit()" type="primary" :submitLoading="submitLoading">提 交</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible: false,
            submitLoading: false,
            loading: false,

            form: {
                agentId: null,
                openid: null,
                nickname: null,
                username: null,
                password: null,
                secret: null,
                refereeMemberId: null,
                refereeMemberName: null,
                refereeMemberOpenId: null,
                regSrc: null,
                mobile: null,
                email: null,
                avatar: null,
                levelId: null,
                sex: null,
                birth: null,
                expire: null,
                integration: null,
                growth: null,
                memberFlag: null,
                code: null,
                city: null,
                status: 1
            },
            rules: {
                nickname: [
                    { required: true, message: '会员昵称不能为空', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' }
                ],
                levelId: [
                    { required: true, message: '会员等级ID不能为空', trigger: 'blur' }
                ],
                city: [
                    { required: true, message: '会员所在城市不能为空', trigger: 'blur' }
                ],
                status: [
                    { required: true, message: '启用状态：1->正常，2->禁用不能为空', trigger: 'blur' }
                ]
            },

            levelList: [],
            refereeMemberList: [],
            agentList: []

        }
    },

    methods: {
        init(id) {
            const refs = this.$refs
            // 情况表单数据
            this.form.id = id || null
            this.visible = true

            this.getLevelList()
            this.getAgentist()

            this.$nextTick(() => {
                refs['form'].resetFields()
                if(this.form.id) {

                    this.getInfo(this.form.id)
                }
            })
        },

        /**
         * 详细信息
         */
        async getInfo(id) {
            if (id) {
                const res = await this.$http({
                    url: '/mall/umsmember/info/' + id,
                    method: 'GET'
                })
                this.form = Object.assign({}, res.data)

                this.remoteMethod(this.form.refereeMemberId)
            }
        },

        /**
         * 提交表单
         */
        async handleSubmit() {
            const refs = this.$refs
            this.submitLoading = true
            const valid = await refs['form'].validate().catch(() => {})
            if(valid) {
                const res = await this.$http({
                    url: `/mall/umsmember/${!this.form.id ? 'save' : 'update'}`,
                    method: 'POST',
                    data: this.form
                })
                if (this.ResultMessage(res)) {
                    this.$emit('refreshDataList')
                    this.submitLoading = false
                    this.visible = false
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        },

        /**
         * 获取会员级别
         */
        async getLevelList() {
            this.loading = true
            const res = await this.$http({
                url: '/mall/umsmemberlevel/list',
                method: 'GET'
            })
            if (this.ResultMessage(res, false)) {
                this.levelList = res.data || []
            }
            this.loading = false
        },

        /**
         * 获取代理商
         */
        async getAgentist() {
            this.loading = true
            const res = await this.$http({
                url: '/mall/wmsagentinfo/list',
                method: 'GET'
            })
            if (this.ResultMessage(res, false)) {
                this.agentList = res.data || []
            }
            this.loading = false
        },

        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    const res = this.$http({
                        url: '/mall/umsmember/page',
                        method: 'GET',
                        params: {keyword: query}
                    }).then(res => {
                        if (this.ResultMessage(res, false)) {
                            this.refereeMemberList = res.data.records || []
                        }
                    })

                    // this.options = this.list.filter(item => {
                    //     return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
                    // });
                }, 200);
            } else {
                this.options = [];
            }
        }

    }
};
</script>

<style lang="scss" scoped></style>
